<template>
  <ul class="pagination">
    <li v-for="n in sliders">
      <span v-if="n==='DOT'" disabled>{{ paginationDot }}</span>
      <a v-else :disabled="pagination.currentPage == n" @click="setPage(n)">{{n}}</a>
    </li>
  </ul>
</template>
<script>
export default {
  props: {
    pagination: Object,
    paginationDot: {
      type: String,
      default: '...'
    },
    setPage: Function
  },
  computed: {
    sliders: function () {
      let totalPages = this.pagination.lastPage
      let sliders = []
      let cur = this.pagination.currentPage
      if (totalPages === 1) {
        return []
      } else if (totalPages < 11) {
        for (let i = 1; i <= totalPages; i++) {
          sliders.push(i)
        }
      } else if (cur < 3) {
        sliders = [1, 2, 3, 4, 5, 'DOT', totalPages - 1, totalPages]
      } else if (totalPages - cur < 4) {
        sliders = [1, 2, 'DOT',
          totalPages - 4,
          totalPages - 3,
          totalPages - 2,
          totalPages - 1,
          totalPages
        ]
      } else {
        let _window = []
        for (let i = -2; i < 3; i++) {
          if (cur + i > 0 && cur + i <= totalPages) {
            _window.push(cur + i)
          }
        }
        if (_window[0] > 3) {
          sliders.push(1, 2, 'DOT')
        } else {
          for (let i = 1; i < _window[0]; i++) {
            sliders.push(i)
          }
        }
        _window.forEach((num) => {
          sliders.push(num)
        })
        let windowLast = _window[_window.length - 1]
        if (totalPages - windowLast < 3) {
          for (let i = windowLast + 1; i <= totalPages; i++) {
            sliders.push(i)
          }
        } else {
          sliders.push('DOT', totalPages - 1, totalPages)
        }
      }
      return sliders
    }
  }
}
</script>
<style scoped lang="scss">
.pagination {
  display: inline-block;
  padding-left: 0;
  list-style: none;
  margin: 0;
  border-radius: 4px;
  & > li {
    display: inline-block;
    a {
      padding: 0.5em 1em;
      border-color: #2dc3e8;
      border-bottom: none;
    }
    a[disabled] {
      color: gray;
      pointer-events: none;
    }
  }
}
</style>
